<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商平台 - 注册</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>

    <link rel="stylesheet" type="text/css" href="./css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="./css/top-nav-optimized.css"/>

    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 蓝色作为主色调
                        secondary: '#10B981', // 绿色作为辅助色
                        danger: '#EF4444',   // 红色用于错误提示
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98];
            }
            .btn-outline {
                @apply border border-gray-300 hover:border-primary text-gray-700 hover:text-primary font-medium py-2 px-4 rounded-md transition-all duration-200;
            }
            .error-text {
                @apply text-danger text-xs mt-1 block;
            }
            .hidden-text {
                @apply hidden text-danger text-xs mt-1;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<div id="app">
    <!-- 顶部导航 -->
    <top></top>
</div>

<!-- 主要内容 -->
<main class="flex-grow container mx-auto px-4 py-8 md:py-16">
    <div class="max-w-md mx-auto">
        <div class="text-center mb-8">
            <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-gray-800 mb-2">创建账户</h1>
            <p class="text-gray-500">开始您的购物之旅</p>
        </div>

        <!-- 注册表单 -->
        <form id="registerForm" class="bg-white rounded-xl shadow-md p-6 md:p-8 transition-all duration-300 hover:shadow-lg">
            <!-- 用户名 -->
            <div class="mb-5">
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            👤
                        </span>
                    <input type="text" id="username" name="username"
                           class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg input-focus"
                           placeholder="请输入用户名" required>
                </div>
                <p class="hidden-text" id="usernameError">用户名已存在</p>
            </div>

            <!-- 密码 -->
            <div class="mb-5">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            🔒
                        </span>
                    <input type="password" id="password" name="password"
                           class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg input-focus"
                           placeholder="请输入密码" required>
                    <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary">
                        👁
                    </button>
                </div>
                <p class="text-gray-500 text-xs mt-1">密码长度至少8位，包含字母和数字</p>
            </div>

            <!-- 手机号 -->
            <div class="mb-5">
                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            📱
                        </span>
                    <input type="tel" id="phone" name="phone"
                           class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg input-focus"
                           placeholder="请输入手机号" required>
                </div>
                <p class="hidden-text" id="phoneError">请输入正确的手机号</p>
            </div>

            <!-- 验证码 -->
            <div class="mb-6">
                <label for="verifyCode" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                <div class="flex space-x-3">
                    <div class="relative flex-grow">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                ✅
                            </span>
                        <input type="text" id="verifyCode" name="verifyCode"
                               class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg input-focus"
                               placeholder="请输入验证码" required>
                    </div>
                    <button type="button" id="sendCodeBtn" class="btn-outline whitespace-nowrap">
                        获取验证码
                    </button>
                </div>
            </div>

            <!-- 注册按钮 -->
            <button type="submit" class="w-full btn-primary mb-4" onclick="sendRegisterRequest()">
                注册
            </button>

            <!-- 同意条款 -->
            <div class="flex items-center mb-6">
                <input type="checkbox" id="agreeTerms" name="agreeTerms" class="h-4 w-4 text-primary border-gray-300 rounded" required>
                <label for="agreeTerms" class="ml-2 block text-sm text-gray-600">
                    我已阅读并同意<a href="#" class="text-primary hover:underline">用户协议</a>和<a href="#" class="text-primary hover:underline">隐私政策</a>
                </label>
            </div>

            <!-- 已有账号 -->
            <div class="text-center">
                <p class="text-gray-600">
                    已有账号？<a href="/login.html" class="text-primary font-medium hover:underline">立即登录</a>
                </p>
            </div>
        </form>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6">
    <div class="container mx-auto px-4">
        <div class="text-center text-gray-500 text-sm">
            <p>© 2025 ShopEasy 电商平台. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- 成功提示弹窗 -->
<div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
        <div class="text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <span class="text-2xl text-secondary">✓</span>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-2">注册成功！</h3>
            <p class="text-gray-600 mb-6">您的账号已成功创建，即将跳转到登录页面</p>
            <button id="closeModal" class="btn-primary w-full">
                确定
            </button>
        </div>
    </div>
</div>

<script>
    // 密码显示/隐藏切换
    const togglePassword = document.getElementById('togglePassword');
    const password = document.getElementById('password');

        if (togglePassword && password) {
            togglePassword.addEventListener('click', () => {
                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                password.setAttribute('type', type);
                // 切换图标
                togglePassword.textContent = type === 'password' ? '👁' : '👁️‍🗨️';
            });
        }

        // 发送验证码倒计时
        const sendCodeBtn = document.getElementById('sendCodeBtn');
        const phoneInput = document.getElementById('phone');

        if (sendCodeBtn && phoneInput) {
            sendCodeBtn.addEventListener('click', () => {
                const phone = phoneInput.value.trim();
                const phoneReg = /^1[3-9]\d{9}$/;

                // 验证手机号
                if (!phone) {
                    alert("手机号不能为空！");
                    return;
                }

                if (!phoneReg.test(phone)) {
                    document.getElementById("phoneError").classList.remove('hidden');
                    document.getElementById("phoneError").classList.add('error-text');
                    return;
                }

                // 发送请求
                axios.post("http://localhost:8080/users/verification/code", {
                    phone: phone
                })
                    .then(function() {
                        // 请求成功后开始倒计时
                        let countdown = 60;
                        sendCodeBtn.disabled = true;
                        sendCodeBtn.textContent = `重新发送(${countdown}s)`;
                        sendCodeBtn.classList.add('opacity-70', 'cursor-not-allowed');

                        const timer = setInterval(() => {
                            countdown--;
                            sendCodeBtn.textContent = `重新发送(${countdown}s)`;

                            if (countdown <= 0) {
                                clearInterval(timer);
                                sendCodeBtn.disabled = false;
                                sendCodeBtn.textContent = '获取验证码';
                                sendCodeBtn.classList.remove('opacity-70', 'cursor-not-allowed');
                            }
                        }, 1000);

                        alert('验证码已发送，请注意查收');
                    })
                    .catch(function(error) {
                        alert('发送失败：' + (error.response?.data?.msg || error.message));
                    });
            });
        }

        // 表单提交处理
        const registerForm = document.getElementById('registerForm');
        const successModal = document.getElementById('successModal');
        const modalContent = document.getElementById('modalContent');
        const closeModal = document.getElementById('closeModal');

        if (registerForm) {
            registerForm.addEventListener('submit', (e) => {
                e.preventDefault();
                // 调用注册函数
                window.sendRegister();
            });
        }

        // 关闭弹窗事件
        if (closeModal) {
            closeModal.addEventListener('click', () => {
                const successModal = document.getElementById('successModal');
                const modalContent = document.getElementById('modalContent');

                modalContent.classList.remove('scale-100', 'opacity-100');
                modalContent.classList.add('scale-95', 'opacity-0');

                setTimeout(() => {
                    successModal.classList.add('hidden');
                    // 跳转到登录页
                    window.location.href = "/login.html";
                }, 300);
            });
    }
    // 注册功能
    // 发送注册请求的函数
    function sendRegisterRequest() {
        // 获取表单数据
        const formData = {
            username: document.getElementById('username').value,
            password: document.getElementById('password').value,
            phone: document.getElementById('phone').value,
            code: document.getElementById('verifyCode').value
        };

        // 简单验证（可根据需要补充更多验证逻辑）
        if (!formData.username || !formData.password || !formData.phone || !formData.code) {
            alert('请填写完整注册信息');
            return;
        }

        // 发送注册请求，这里假设后端接口地址是 /users/register
        axios.post("/users/register", formData)
            .then(function (response) {
                // 注册成功，显示成功弹窗
                successModal.classList.remove('hidden');
                setTimeout(() => {
                    modalContent.classList.remove('scale-95', 'opacity-0');
                    modalContent.classList.add('scale-100', 'opacity-100');
                }, 10);
            })
            .catch(function (error) {
                // 注册失败，弹出错误提示
                alert('注册失败');
            });
    }
</script>

<!-- 外部脚本引入 -->
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/top.js"></script>

<!-- 创建Vue实例 -->
<script>
    // 确保在DOM加载完成后初始化Vue
    document.addEventListener('DOMContentLoaded', function() {
        new Vue({
            el: "#app"
        });
    });
</script>
</body>
</html>
